<template>
  <div class="scheme-banner-1">
    <div class="container f f-col f-ac f-jc">
      <div v-slide-plus class="scheme-title">PRESCRIPTION</div>
      <div v-slide-plus class="scheme-slogan">{{ name }}</div>
      <div class="scheme-type">
        <div
          v-for="(i, k) in list"
          :key="k"
          class="scheme-type-item"
          :class="{
            'scheme-type-active': i.value == modelValue,
          }"
          @click="changeType(i)"
        >
          {{ i.label }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
defineProps({
  // 当前类型
  modelValue: {
    type: String,
    default: "",
  },
  // 标题
  name: {
    type: String,
    default: "解决方案",
  },
  // 类型列表
  list: {
    type: Array as any,
    default: () => [],
  },
});
const emit = defineEmits(["update:modelValue", "change"]);

// 切换类型
const changeType = (item: any) => {
  emit("update:modelValue", item.value);
  emit("change", item.value);
};
</script>
<style lang="scss" scoped>
.scheme-banner-1 {
  width: 100%;
  height: 625px;
  background: url("../../../../assets/scheme/banner_bg_1.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .container {
    height: 100%;
    position: relative;
    .scheme-title {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 164px;
      height: 36px;
      border-radius: 28px;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      background: linear-gradient(
        90deg,
        rgba(204, 204, 204, 1) 0%,
        rgba(204, 204, 204, 0) 100%
      );
    }
    .scheme-slogan {
      width: 569px;
      height: 156px;
      font-size: 52px;
      font-weight: 700;
      line-height: 78px;
      color: #fff;
      text-align: center;
    }
    .scheme-type {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 63px;
      display: flex;
      align-items: center;
      &-item {
        flex: 1;
        height: 100%;
        color: #fff;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.3px;
        line-height: 25.6px;
        border-top: 4px solid transparent;
        &:hover {
          cursor: pointer;
          background: rgba(255, 255, 255, 0.5);
        }
      }
      &-active {
        background: #fff;
        color: #0e0b31;
        border-top: 4px solid #4580dd;
      }
    }
  }
}
</style>
